<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>     
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<c:url value='/jquery/jquery.js'/>"></script>
<script type="text/javascript">
   $(function(){
	   
	   /* 页面初始化，显示所有省份信息; */
	   $.post("<c:url value='/ProvinceServlet'/>",
			   null,
			   function(data){
		   //根据状态码进行判断
		     if(data.sata==200){
		    	 $(data.data).each(function(){
			    	 var html="<option value='"+this.pid+"'>"+this.pname+"</option>";
			    	 $(html).appendTo("#province");
			     })
		     }else{
		    	 //把异常消息展示到页面
		    	 alert(data.message);
		     }
		       
	   },"JSON");
	   
	   /* 省份下拉框列表选项改变,城市下拉框的内容响应改变 */
	  $("#province").change(function(){
		 $.post("<c:url value='/CityServlet'/>",
				 {pid:$("#province").val()},
				 function(data){
					 /* 删除子元素,过滤大于0的下标 */
					$("#city").children(":gt(0)").remove();
			 $(data).each(function(){
				 var html="<option value='"+this.cid+"'>"+this.cname+"</option>";
		    	 $(html).appendTo("#city");
			 })
		 },"JSON")
	  })
   })
</script>
</head>
<body>

   省份<select id="province">
          <option value="0">请选择</option>
   </select>
   城市<select id="city">
          <option value="0">请选择</option>
   </select>
</body>
</html>